table {
  border-collapse: collapse; /* remove double border lines */
  width: 100%;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
}
th {
  background-color: #f2f2f2;
}

Rendered Output Preview:

Clean Header 1	Clean Header 2
Collapsed Border Cell 1	Collapsed Border Cell 2

2. Make Table Scrollable on Mobile Phones

On small mobile screens, wide tables can break page layout. Wrap your table inside <div style="overflow-x: auto;"> to allow horizontal scrolling.

💡 Next Lesson: Improve typography on your web pages with How to Add Multiple Google Fonts in HTML & CSS!

Happy coding! If you have any questions, try practicing the code in your editor!

<div style="overflow-x: auto;">
  <table border="1">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </table>
</div>

Rendered Output Preview:

#cell padding

How to Use HTML Table Tag